<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">消费记录</text>
		</uni-nav-bar>
		<view class="head flex-r ac" :class="navBorder ? 'navborder':''">
			<template v-for="(item,index) in tabList">
				<view class="tab-list flex-r ac" :class="{'active': tabCur == index}" :key="index" @tap="tabChange(index)">
					<image src="@/public/images/public/fgx.png" mode="aspectFill" v-if="index != 0"></image>
					<text class="text-regular">{{item.name}}</text>
				</view>
			</template>
		</view>
		<keep-alive>
		<view class="body bottom-ios" v-if="tabCur == 0" @touchstart="touchStart" @touchend="touchEnd">
			<EmptyContent v-if="!userPayRecord[tabCur]" top="160rpx" text="暂无购买的料" img="qsy_zwxl" @refresh="getRecords"></EmptyContent>
			<view class="article-list flex-c" v-else>
				<view class="article-detail-item flex-c" v-for="(article, index) in userPayRecord[tabCur]" :key="article.id+index" @tap="$CHS.goArticleDetail(article.articleId)">
					<view class="item-info text-secondary flex-r ac jsb mg20">
						<text>购买时间：{{article.createTime.replace(/-/g, '.')}}</text>
						<text :class="{'color-grey': article.finish == 1}">{{article.finish == 1 ? '已结束' : '未开赛'}}</text>
					</view>
					<view class="item-head flex-r ac" @tap.stop="$CHS.goExpertHome(article.expertId)">
						<view class="author-image border-round">
							<lazy-image class="inheritwh border-round" :src="article.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
							<view class="expert-note" v-if="article.saleArticleNum" :class="{'round': article.saleArticleNum < 10}">
								<text>{{article.saleArticleNum}}</text>
							</view>
						</view>
						<view class="author-info flex-c">
							<view class="info-top flex-r ac">
								<text class="text-secondary text-bold">{{article.expertName}}</text>
								<image class="icon" v-if="article.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
								<text class="tag-red" v-if="article.hotContineTxt">{{article.hotContineTxt}}</text>
								<text class="tag-gold" v-else-if="article.hitResultTxt">{{article.hitResultTxt}}</text>
							</view>
							<text class="text-info color-grey text-hidden">{{article.expertRemark}}</text>
						</view>
						<!-- <view class="author-result-score flex-c" v-if="Number(article.hitRate)>=60">
							<view class="result-score flex-r">
								<text>{{article.hitRate}}</text>
								<text>%</text>
							</view>
							<text class="result-des color-red">{{article.hitRateName}}</text>
						</view> -->
					</view>
					<view class="item-body flex-c">
						<view class="item-body-info flex-r ac">
							<view class="article-title text-hidden two">
								<image v-if="article.articleType==2" class="spfa" src="@/public/images/index/spfa.png" ></image> 
								<text class="text-primary">{{article.title}}</text>
							</view>
							<view class="card-free" v-if="article.label != '0' && article.finish != 1 && !article.articleResult">
								<image src="@/public/images/public/yxmd.png" mode="aspectFit" v-if="article.label == '1'"></image>
								<image src="@/public/images/public/flfa.png" mode="aspectFit" v-else-if="article.label == '2'"></image>
							</view>
						</view>
						<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList"></ArticleMatch>
						<!-- <template v-if="article.articleType==2">
							<view class="item-body-video" v-if="article.videoUrl">
								<FullVideo :url="article.videoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
							</view>
							<view class="item-body-video" v-else>
								<view class="play">
									<image v-if="article.sportId == 1" src="@/public/images/public/t1.png" mode="aspectFit"></image>
									<image v-else src="@/public/images/public/lqt.png" mode="aspectFit"></image>
									<image class="btn" src="@/public/images/public/bfj.png" mode="aspectFit"></image>
								</view>
								<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-if="article.sportId == 1"></FullVideo>
								<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')" :article="true" width="670rpx" height="376rpx"></FullVideo>
							</view>
						</template> -->
					</view>
					<view class="item-foot flex-r ac jsb">
						<view class="item-foot-info text-info color-grey flex-r ac">
							<uni-dateformat class="date" :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
							{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
							<text class="views" v-if="article.virtualReadNum">{{article.virtualReadNum}}人查看</text>
						</view>
						<view class="item-foot-type text-info flex-r ac">
							<view class="type-info color-red" v-if="!article.articleResult">
								<text v-if="article.state == 1">不中返还</text>
								<text v-else-if="article.state == 3">不中补单</text>
							</view>
							<view class="type-info color-red" v-else-if="article.articleResult === 2">
								<template v-if="article.finishTime && new Date() - new Date(article.finishTime.replace(/-/ig, '/')) > 48*3600000">
									<text v-if="article.state == 1 && article.backFlag == 1">已返还至账户</text>
									<text v-else-if="article.state == 3 && article.supplementFlag == 1">已补单</text>
									<text v-else-if="article.supplementFlag == 1">已补单</text>
								</template>
								<template v-else>
									<text v-if="article.state == 1">{{article.backFlag == 1 ? '已返还至账户' : '未返还'}}</text>
									<text v-else-if="article.state == 3">{{article.supplementFlag == 1 ? '已补单' : '未补单'}}</text>
									<text v-else-if="article.supplementFlag == 1">已补单</text>
								</template>
							</view>
							<view class="type-price flex-r ac">
								<text class="color-red">{{article.payAmount || 0}}</text>
								<image v-if="article.payChannel==3" src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
								<text class="color-red" v-else >元</text>
							</view>
						</view>
					</view>
					<view class="item-icon" v-if="article.matchInfoList && article.articleResult">
						<image :src="require('@/public/images/article/res_'+article.articleResult+(article.articleResult == 1 ? '_'+article.matchInfoList.length : '')+'.png')" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="list-end flex-r pb20" v-if="tabData[tabCur].isEnd">
				<view class="list-end-line"></view>
				<text>加载完成，以上为您近2周内解锁的方案</text>
				<view class="list-end-line"></view>
			</view>
		</view>
		</keep-alive>
		<keep-alive>
		<view class="body bottom-ios" v-if="tabCur == 1" @touchstart="touchStart" @touchend="touchEnd">
			<view class="cards-list flex-c">				
				<template>
					<view class="list-head flex-r">
						<text v-for="(item, index) in cardStatus" :class="{'active': index == tabData[tabCur].status}" :key="index" @tap="statusChange(index)">{{item}}</text>
					</view>
					<EmptyContent v-if="!cardList[tabData[tabCur].status]" top="160rpx" text="暂无购买的卡" img="qsy_zwxl" @refresh="getRecords"></EmptyContent>
					<view class="list-body" v-else>
						<view class="list-item flex-c" v-for="(card, index) in cardList[tabData[tabCur].status]" :key="index">
							<view class="card-head text-secondary flex-r ac jsb">
								<text>购买时间：{{card.createTime.replace(/-/g, '.')}}</text>
								<text v-if="card.cardType != 3" :class="card.endTime && new Date(card.endTime.replace(/-/g, '/')) > new Date() ? 'color-blue' : 'color-grey'">{{card.endTime && new Date(card.endTime.replace(/-/g, '/')) > new Date() ? '使用中' : '已到期'}}</text>
								<text v-else :class="card.day > 0 ? 'color-blue' : 'color-grey'">{{card.day > 0 ? '使用中' : '已结束'}}</text>
							</view>
							<view class="card-body flex-c">
								<view class="body-detail flex-r ac jsb">
									<view class="left flex-c">
										<text class="card-title" :class="{'active': card.day > 0}">{{card.cardType != 3 ? card.expertName+'的优享福利卡' : card.title}}</text>
										<view class="card-info flex-r">
											<template v-if="card.cardType != 3">
												<template v-if="card.endTime && new Date(card.endTime.replace(/-/g, '/')) > new Date()">
													<image src="@/public/images/public/yk.png" mode="aspectFit" v-if="card.cardType == 1"></image>
													<image src="@/public/images/public/zk.png" mode="aspectFit" v-else-if="card.cardType == 2"></image>
												</template>
												<template v-else>
													<image src="@/public/images/public/yk_h.png" mode="aspectFit" v-if="card.cardType == 1"></image>
													<image src="@/public/images/public/zk_h.png" mode="aspectFit" v-else-if="card.cardType == 2"></image>
												</template>
												<text class="card-info-text" :class="{'active': card.day > 0}">{{card.cardBean}}彩虹豆/{{card.cardTime}}天</text>
											</template>
											<view class="num-info-text" :class="{'active': card.day > 0}" v-else>
												<text class="num">{{card.singleBean}} </text><text class="color-grey">彩虹豆/次 x {{card.cardTime}}次</text>
											</view>
										</view>
										<text class="card-num color-grey" v-if="card.cardType != 3 && card.minNum">最低场次：{{card.minNum}}场</text>
									</view>
									<view class="right flex-c">
										<template v-if="(card.cardType == 3 && card.day > 0) || (card.endTime && new Date(card.endTime.replace(/-/g, '/')) > new Date())">
											<view class="card-daynum flex-r">
												<text class="num color-red text-bold">{{card.day}}</text>
												<text class="text">{{card.cardType == 3 ? '次' : '天'}}</text>
											</view>
											<text class="card-daytext">{{card.cardType == 3 ? '剩余次数' : '剩余天数'}}</text>
										</template>
									</view>
								</view>
								<view class="body-expert flex-r ac">
									<view class="expert flex-r ac" @tap="$CHS.goExpertHome(card.expertId)">
										<lazy-image class="avatar" :src="card.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
										<text>{{card.expertName}}</text>
										<image class="icon" src="@/public/images/public/y@1x.png" mode="aspectFit" v-if="card.cardFlag == 1"></image>
									</view>
									<button type="default" class="chat" v-if="card.followStatus == 2" @tap="favExpert(card, index)">关注</button>
									<button type="default" class="chat" v-else @tap="$CHS.goChat(card.expertId, 1)">私信</button>
								</view>
							</view>
							<view class="card-foot flex-r ac">
								<view class="buy" v-if="card.cardFlag == 1" @tap="$goByName('expertcards', {eid: card.expertId, random: Date.now()})">
									<template v-if="card.cardType == 1 && card.endTime && new Date(card.endTime.replace(/-/g, '/')) > new Date() && card.cardStatus == 1">
										<button>续费优享卡</button>
										<text>享85折优惠</text>
									</template>
									<template v-else-if="card.cardType == 2 && card.endTime && new Date(card.endTime.replace(/-/g, '/')) < new Date()">
										<button>订购优享卡</button>
									</template>
								</view>
								<button @tap="$goByName('unlockarticle', {cardType: card.cardType, cardId: card.cardRecordId})">解锁的料</button>
							</view>
						</view>
					</view>
					<view class="list-end flex-r pb20">
						<text>已经到底啦～</text>
					</view>
				</template>
			</view>
		</view>
		</keep-alive>
		<keep-alive>
		<view class="body bottom-ios" v-if="tabCur == 2" @touchstart="touchStart" @touchend="touchEnd">
			<EmptyContent v-if="!userPayRecord[tabCur]" top="160rpx" text="暂无打赏记录" img="qsy_zwczjl" @refresh="getRecords"></EmptyContent>
			<view class="reward-list mt20 flex-c">
				<view class="reward-item flex-r ac" v-for="(reward, index) in userPayRecord[tabCur]" :key="reward.id+index">
					<view class="avatar border-round" @tap="$CHS.goExpertHome(reward.expertId)">
						<lazy-image class="inheritwh border-round" :src="reward.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					</view>
					<view class="info flex-c">
						<text class="title text-primary">{{reward.expertName}}</text>
						<text class="text-small color-grey mt20">打赏时间：{{reward.createTime.replace(/-/g, '.').substring(0, 16)}}</text>
					</view>
					<view class="money flex-r ac">
						<text class="text-primary color-red text-bold">{{reward.payAmount}}</text>
						<image src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="list-end flex-r mt20 pb20" v-if="tabData[tabCur].isEnd">
				<text>已经到底啦～</text>
			</view>
		</view>
		</keep-alive>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
					{name: '我购买的方案'},{name: '我购买的卡'},{name: '我的打赏'}
				],
				tabCur: 0,
				tabData: [
					{pageNo: 1,	isEnd: false},
					{pageNo: 1,	isEnd: false, status: 0},
					{pageNo: 1,	isEnd: false}
				],
				userPayRecord: [],
				cardList: [],
				cardStatus: ['全部', '使用中', '已到期'],
				
				navBorder: false
			}
		},
		components: {
			ArticleMatch: () => import("@/components/ch-article/ch-articlematch.vue"),
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			if(this.$Route.query.tab){
				this.tabCur = this.$Route.query.tab
			}
			this.getRecords()
		},
		onReachBottom() {
			if(!this.tabData[this.tabCur].isEnd){
				this.getRecords()
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//刷新买的卡
			refresh() {
				this.tabData[this.tabCur].pageNo = 1
				this.getRecords()
			},
			//查询记录
			getRecords() {
				let url = ''
				if(this.tabCur == 0){
					url = '/api/userPayRecord/queryUserPayRows'
					this.getUserPayRecord(url)
				}else if(this.tabCur==1){
					this.getUserCard()
				}else if(this.tabCur==2){
					url = '/api/userPayRecord/queryUserRewardRows'
					this.getUserPayRecord(url)
				}
			},
			//获取用户购买/打赏信息
			getUserPayRecord(url) {
				this.$http.get({
					url,
					data: {
						pageNo: this.tabData[this.tabCur].pageNo,
						pageSize: 10,
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data,'data’');
					if(data.success && data.result.total){
						if(data.result.current == 1){
							this.$set(this.userPayRecord, this.tabCur, data.result.records)
						}else{
							this.userPayRecord[this.tabCur].push(...data.result.records)
						}
						this.tabData[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabData[this.tabCur].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询购买的卡
			getUserCard(pageNo = 1){
				let status = this.tabData[this.tabCur].status
				this.$http.get({
					url: '/api/card/record/user/list',
					data: {
						pageNo: this.tabData[this.tabCur].pageNo,
						pageSize: 10,
						status
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result.total){
						if(data.result.current == 1){
							this.$set(this.cardList, status, data.result.records)
						}else{
							this.cardList[status].push(...data.result.records)
						}
						this.tabData[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabData[this.tabCur].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//关注专家
			favExpert(card, index) {
				if(card.expertStatus != 1){
					this.$ShowToast({text: '专家状态异常，关注失败', type: 2})
					return
				}
				if(card.expertId === this.isFaving){ //防止重复提交
					return
				}else{
					this.isFaving = card.expertId
					this.$CHS.favExpert(card.expertId).then( res => {
						console.log(res);
						this.isFaving = null
						let status = this.tabData[this.tabCur].status
						this.cardList[status][index].followStatus = 1
						this.$forceUpdate()
					}).catch(err => {
						console.log(err);
						this.isFaving = null
					})
				}
			},
			//卡状态切换
			statusChange(status) {
				if(this.tabData[this.tabCur].status != status){
					this.tabData[this.tabCur].status = status
					this.tabData[this.tabCur].pageNo = 1
					this.getRecords()
				}
			},
			//选项卡切换
			tabChange(index) {
				this.tabCur = index;
				if(index != 1){
					if(!this.userPayRecord[index]){
						this.getRecords()
					}
				}else{
					let status = this.tabData[this.tabCur].status
					if(!this.cardList[status]){
						this.getRecords()
					}
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
	}
	.head{
		max-width: $max-width;
		margin: $pc-margin;
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 5;
		.tab-list{
			flex: 2;
			height: 88rpx;
			image{
				width: 1rpx;
				height: 32rpx;
			}
			.text-regular{
				flex: 2;
				text-align: center;
			}
			&.active{
				color: #0055FF;
				font-weight: 500;
				background-image: url("~@/public/images/public/zjdl_hk.png");
				background-repeat: no-repeat;
				background-position: bottom center;
				background-size: 60rpx 8rpx;
			}
		}
	}
	.body{
		padding: 88rpx 0 0;
		.article-list{
			padding: 20rpx 20rpx 0;
			.article-detail-item{
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				position: relative;
				.item-info{
					height: 80rpx;
					box-shadow: 0 1rpx 0 0 #EDEDED;
				}
				.item-head{
					z-index: 2;
					margin: 30rpx 20rpx 0;
					.author-image{
						position: relative;
						width: 80rpx;
						height: 80rpx;
						background-color: #FFFFFF;
						background-size: 100%;
					}
					.author-info{
						flex: 2;
						margin-left: 20rpx;
						.info-top{
							.icon{
								margin-left: 8rpx;
								width: 24rpx;
								height: 24rpx;
							}
						}
						.text-info{
							margin-top: 15rpx;
							max-width: 450rpx;
						}
					}
				}
				.item-body{
					z-index: 2;
					margin: 20rpx 20rpx 0;
					.item-body-info{
						position: relative;
						margin-bottom: 20rpx;
						.article-title{
							width: 670rpx;
							line-height: 42rpx;
							z-index: 2;
							.spfa{
								width: 112rpx;
								height: 32rpx;
								vertical-align: text-bottom;
								margin-top: -4rpx;
								margin-right: 20rpx;
								line-height: 42rpx;
							}
						}
						.card-free{
							position: absolute;
							right: 0;
							height: 82rpx;
							image{
								width: 82rpx;
								height: 82rpx;
							}
							z-index: 1;
						}
					}
					.item-body-events {
						background: #F4F8FF;
						border-radius: 10rpx;
						padding: 0 20rpx;
						margin-bottom: 30rpx;
						.events-left{
							width: 100%;
							.event-detail{
								padding: 20rpx 0;
								align-items: flex-start;
								font-size: 22rpx;
								color: #999999;
								.event-btn{
									background: #D9E5FF;
									border-radius: 6rpx;
									line-height: 20rpx;
									font-size: 20rpx;
									color: #4C88FF;
									padding: 10rpx;
									white-space: nowrap;
								}
								.event-info{
									margin-left: 15rpx;
									line-height: 40rpx;
								}
								.event-date{
									margin: 0 15rpx;
									line-height: 22rpx;
								}
								.event-name{
									line-height: 28rpx;
								}
								.event-team{
									margin: 0 15rpx;
									line-height: 28rpx;
								}
							}
							.event-detail.border{
								border-top: 1rpx #E6E9ED solid;
			
							}
						}
						.events-right{
							text-align: right;
							height: 80rpx;
							width: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.item-body-video{
						margin: 20rpx 0 0;
						width: 670rpx;
						height: 376rpx;
						border-radius: 10rpx;
						.play{
							position: relative;
							image{
								border-radius: 10rpx;
							}
							.btn{
								position: absolute;
								width: 120rpx;
								height: 120rpx;
							}
						}
					}
				}
				.item-foot{
					margin: 20rpx 20rpx 30rpx;
					.item-foot-info{
						.views{
							margin-left: 20rpx;
						}
					}
					.item-foot-type{
						.type-info{
							margin-right: 15rpx;
						}
						.type-price{
							image{
								width: 24rpx;
								height: 24rpx;
								margin-left: 15rpx;
							}
						}
					}
				}
				.item-icon{
					position: absolute;
					top: 80rpx;
					right: 0;
					image{
						width: 80rpx;
						height: 80rpx;
					}
					z-index: 1;
				}
			}
		}
		.reward-list{
			background-color: #FFFFFF;
			.reward-item{
				box-shadow: 0 1rpx 0 0 #EDEDED;
				padding: 30rpx 20rpx;
				.avatar{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
					background-size: 100%;
				}
				.info{
					flex: 2;
					margin-left: 20rpx;
					.title{
						font-weight: 500;
					}
				}
				.money{
					image{
						margin-left: 20rpx;
						width: 24rpx;
						height: 25rpx;
					}
				}
			}
			.reward-item:last-child{
				box-shadow: none;
			}
		}
		.cards-list{
			padding: 0 20rpx;
			.list-head{
				position: fixed;
				padding: 20rpx 0;
				width: 100%;
				box-sizing: border-box;
				background-color: #F2F5FA;
				z-index: 2;
				text{
					text-align: center;
					width: 140rpx;
					height: 50rpx;
					background: #E6EBF2;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 50rpx;
					margin-right: 30rpx;
				}
				.active{
					background: #0055FF;
					color: #FFFFFF;
				}
			}
			.list-body{
				margin-top: 90rpx;
				.list-item{
					background: #FFFFFF;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					.card-head{
						height: 80rpx;
						padding: 0 20rpx;
						box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
					}
					.card-body{
						padding: 30rpx 20rpx;
						box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
						.body-detail{
							.left{
								.card-title{
									font-size: 32rpx;
									font-weight: 500;
									line-height: 1;
									color: #999999;
									&.active{
										color: #333333;
									}
								}
								.card-info{
									line-height: 1;
									margin-top: 15rpx;
									align-items: center;
									image{
										width: 56rpx;
										height: 32rpx;
										margin-right: 20rpx;
									}
									.card-info-text{
										font-size: 24rpx;
										color: #A6917C;
										&.active{
											color: #8C5115;
										}
									}
									.num-info-text{
										.num, .color-grey{
											color: #999;
										}
										&.active{
											.num{
												color: #F23030;
												margin-right: 5rpx;
											}
											.color-grey{
												color: #666;
											}
										}
									}
								}
								.card-num{
									margin-top: 15rpx;
									font-size: 22rpx;
									line-height: 1;
								}
							}
							.right{
								align-items: flex-end;
								.card-daynum{
									align-items: flex-end;
									.num{
										font-size: 40rpx;
										font-family: Roboto;
										line-height: 0.8;
									}
									.text{
										font-size: 20rpx;
										line-height: 1;
									}
								}
								.card-daytext{
									margin-top: 15rpx;
									font-size: 22rpx;
									line-height: 1;
								}
							}
						}
						.body-expert{
							margin-top: 15rpx;
							.expert{
								flex: 2;
								.avatar{
									width: 56rpx;
									height: 56rpx;
									border-radius: 50%;
								}
								.icon{
									width: 26rpx;
									height: 26rpx;
								}
								text{
									margin: 0 10rpx 0 20rpx;
									font-size: 26rpx;
									line-height: 1;
								}
							}
							.chat{
								width: 120rpx;
								height: 48rpx;
								box-sizing: border-box;
								border: 1rpx solid #0055FF;
								border-radius: 24rpx;
								font-size: 22rpx;
								font-weight: 500;
								color: #0055FF;
								background-color: #FFFFFF;
								line-height: 46rpx;
								margin: 0;
								padding: 0;
							}
						}
					}
					.card-foot{
						height: 96rpx;
						justify-content: flex-end;
						button{
							height: 60rpx;
							background: #0055FF;
							border-radius: 30rpx;
							margin: 0;
							margin-right: 20rpx;
							padding: 0 30rpx;
							border: none;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 60rpx;
						}
						.buy{
							position: relative;
							button{
								background: linear-gradient(90deg, #FFD18C 0%, #FFEBCE 100%);
								color: #591500;
							}
							text{
								padding: 6rpx 17rpx;
								background: #F23030;
								border-radius: 16rpx 15rpx 15rpx 0rpx;
								font-size: 20rpx;
								line-height: 1;
								color: #FFFFFF;
								position: absolute;
								top: -18rpx;
								left: 68rpx;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}
</style>
